<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '时间选择器',
  },
}
</route>
<template>
  <view class="time_slider">

    <view>
      <view>参数</view>
      <view class="p20 dis_flex">
        <view class="dis_flex">
          <text>高度</text>
          <input v-model="state.height" placeholder="" class="inp" />
        </view>
        <view class="dis_flex">
          <text>开始时间</text>
          <input v-model="state.startTime" placeholder="" class="inp" />
        </view>
        <view class="dis_flex">
          <text>结束时间</text>
          <input v-model="state.endTime" placeholder="" class="inp" />
        </view>
        <view class="dis_flex">
          <text>步长(分钟)</text>
          <input v-model="state.step" placeholder="" class="inp" />
        </view>
        <view @click="refresh">刷新组件</view>
        <!-- <button @click="refresh">
          刷新
        </button> -->

      </view>
    </view>
    <time-slider :height="state.height" :startTime="state.startTime" :endTime="state.endTime" :step="state.step"
      :inActiveList="state.inActiveList" :selectedMinute="state.selectedMinute" v-if="state.show"
      @change="changeTime"></time-slider>
    <view>组件外取值：{{ state.selectedTime }}</view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, getCurrentInstance, onMounted } from 'vue'
import TimeSlider from '@/components/time-slider/index.vue'
let state = reactive({
  height: '40rpx',
  startTime: '08:00',
  endTime: '20:05',
  step: 10,
  show: true,
  inActiveList: [["09:00", "09:30"], ["12:00", "14:00"], ["14:20", "15:00"]],
  selectedMinute: 30,
  selectedTime: [],
})
const refresh = () => {
  state.show = false;
  setTimeout(() => {
    state.show = true;
  }, 500);
}
const changeTime = (param) => {
  console.log("🚀====debug==== ~ changeTime ~ param:", param)
  state.selectedTime = param;
}
onMounted(() => {
  const instance = getCurrentInstance();
});

</script>

<style lang="scss" scoped>
.time_slider {}

.dis_flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10rpx;
}

.p20 {
  padding: 20rpx;
}



.inp {
  margin-left: 10rpx;
  margin-right: 10rpx;
  width: 120rpx;
  display: inline-block;
  border: solid 1px #ccc;
}
</style>
